<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="title" label="职务" width="180"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showEditDlg(scope.row)">
            <font-awesome-icon
              :icon="['fas', 'edit']"
              style="font-size: 18px"
            />编辑权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹出层 -->
    <el-dialog title="编辑权限" :visible.sync="dialogFormVisible">
      <el-tree
        :data="permisData"
        show-checkbox
        node-key="id"
        ref="tree"
        accordion
        highlight-current
        :props="defaultProps"
      >
      </el-tree>
      <div slot="footer" class="dialog-footer">

          <el-button type="primary" @click="HandleEdit()">确 定</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { list_ag, modifyById } from '../../api/auth-group/api'
  import { list_pems, getById } from '../../api/position/api'
  export default {
    mounted() {
      list_ag().then((res) => {
        this.tableData = res.data
      })
      list_pems().then((res) => {
        this.permisData = res.data
      })
    },
    methods: {
      getCheckedKeys() {
        return this.$refs.tree.getCheckedKeys() + ''
        // console.log(this.$refs.tree.getCheckedKeys() + '')
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([])
      },
      // setCheckedNodes() {
      //   this.$refs.tree.setCheckedNodes(this.checkedData)
      // },
      showEditDlg(row) {
        const id = row.id
        this.rowId = id
        this.dialogFormVisible = true
        this.$nextTick(async () => {
          const { data } = await this.getCheckedData(id).catch()
          this.checkedData = data

          this.$refs.tree.setCheckedNodes(this.checkedData)
        })
      },

      async getCheckedData(id) {
        return await getById(id)
      },
      // 修改权限
      HandleEdit() {
        this.$confirm('确认修改吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            modifyById(this.rowId, this.getCheckedKeys()).then((res) => {
              console.log(res)
              this.dialogFormVisible = false
              if (res.data) {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改',
            })
          })
      },
    },

    data() {
      return {
        dialogFormVisible: false,
        tableData: [],
        permisData: [],
        checkedData: [
          {
            id: 11,
            label: '医生管理',
            url: '/his/sys/doctor',
            fid: 10,
            children: [],
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        rowId: '',
      }
    },
  }
</script>
